<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css">
    <script src="layui/layui.all.js" charset="utf-8"></script>
    <style type="text/css">
        body{font:12px/180% "Microsoft YaHei","微软雅黑", "宋体";}

        #rightDiv{background:url(img/images.jpg) no-repeat center top;}
        #box{margin:auto;width:660px;font-size:48px;height:94px;line-height:94px;overflow:hidden;color:#138eee;text-align:center;padding:0 30px;margin-top:200px;}
        #bt{margin:auto;width:200px;text-align:center;margin-top:75px;color:#fff;font-size:25px;line-height:28px;cursor:pointer;}
    </style>
</head>
<body>
<div class="container">
    <div class="row clearfix" style="margin-top: 20px;">
        <div class="col-md-3 column" id="leftDiv">
            <header style="height: 100%">
                <div align="left">
                    <table style="width: 100%;">
                        <tr>
                            <td>
                                <form class="form-inline" onsubmit="return false">
                                    <div class="form-group">
                                        班级：
                                        <select class="form-control input-sm" id="className">
                                            <option value="6-1" selected>六年一班</option>
                                            <option value="6-2">六年二班</option>
                                            <option value="6-4">六年四班</option>
                                        </select>
                                        <button id="searchBtn" class="layui-btn layui-btn-sm" ><i class="layui-icon">&#xe615;</i>搜索</button>
                                    </div>
                                </form>
                            </td>
                        </tr>
                    </table>
                </div>
            </header>

            <table class="layui-hide" id="studentTable">

            </table>
        </div>
        <div class="col-md-9 column" id="rightDiv" style="height: 800px;">
            <div id="box">是谁的小眼睛没有看老师？</div>
            <div id="bt">开始点名</div>
        </div>
    </div>
</div>
<script type="text/html" id="switchTpl">
    <!-- 这里的 checked 的状态只是演示 -->
    <input type="checkbox" name="sex" value="{{d.gender}}" lay-skin="switch" lay-text="女|男" {{ d.gender == 'F' ? 'checked' : '' }}>
</script>
<script>
    var namelist = null;

    var isRolling = null;
    var rolling = null;

    layui.use('table', function(){
        var table = layui.table;

        table.render({
            elem: '#studentTable'
            ,url:'/rollcall/' + $('#className').val()
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [[
                {type:'checkbox', LAY_CHECKED: true}
                ,{field:'id', hide: true}
                ,{field:'number', width:80, title: '学号', sort: true}
                ,{field:'name', width:135, title: '姓名', sort: true}
                // ,{field:'gender', width:80, title: '性别', sort: true, templet: '#switchTpl', unresize: true}
            ]]
        });

        $('#searchBtn').on('click', function () {
            table.reload('studentTable', {
                url: '/rollcall/' + $('#className').val()
            })
        })

        $('#bt').on('click', function () {
            namelist = table.checkStatus('studentTable').data;
            if(!namelist) {
                console.log('no students');
                return;
            }

            var bt = $("#bt");
            if(!isRolling){
                bt.html("停止点名");
                rolling = setInterval(function (args) {
                    var box = $("#box");
                    var num = Math.floor((Math.random()*100000))%namelist.length;
                    box.html(namelist[num].name);
                },10);
                isRolling = true;
            }else{
                bt.html("开始点名");
                clearInterval(rolling);
                isRolling = false;
            }
        })



    });


</script>
</body>
</html>